<template>
  <div class="queryProducts">
    <div class="admin_img_top">
       <div class="search_content">
         <div class="search_item">
           <span>ID:</span>
          <Input v-model="searchForm.id" placeholder="输入bannerID"/>
         </div>
         <!-- <div class="search_item">
           <span>图片连接:</span>
            <Input v-model="searchForm.url" placeholder="输入banner图片连接"/>
         </div>
         <div class="search_item">
           <span>跳转连接:</span>
          <Input v-model="searchForm.link" placeholder="输入banner跳转连接"/>
         </div> -->
         <div class="search_item">
           <span>标题:</span>
          <Input v-model="searchForm.title" :rows='1' style="height:32px;" type="textarea" placeholder="输入banner标题"/>
         </div>
       </div>
       <div class="admin_top_handle">
         <Button type="primary" @click="search">Search</Button>
            <Button style="margin-left: 8px" @click="addBanner">添加</Button>
       </div>
    </div>
    
    <div class="productsInfo">
      <Table border :columns="producsTitle" :data="products">
        <template slot-scope="{ row }" slot="banner_title">
          <span>{{ row.banner_title }}</span>
        </template>
        <template style=" white-space: nowrap;overflow: hidden;text-overflow: ellipsis;" slot-scope="{ row }" slot="banner_status">
          <span>{{ row.banner_status==1?'不能使用':'正常' }}</span>
        </template>
        <template slot-scope="{ row }" slot="action">
          <Button type="error" size="small" @click="fixTable(row)">编辑</Button>
        </template>
      </Table>
    </div>
    <div class="add_banner">
      <Modal
        v-model="show"
        :title="isAdd?'添加banner':'修改banner'"
        @on-ok="modalSubmit"
        @on-cancel="show=false">
      <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
          <FormItem label="标题" prop="title">
              <Input v-model="formValidate.title" placeholder="标题"></Input>
          </FormItem>
          <FormItem label="图片" prop="url">
              <Input v-model="formValidate.url" placeholder="连接"></Input>
          </FormItem>
          <FormItem label="排序" prop="order">
              <Input v-model="formValidate.order" type="number"></Input>
          </FormItem>
          <FormItem v-if="formValidate.status" label="状态" prop="status">
              <Input v-model="formValidate.status" placeholder="0不能使用1正常"></Input>
          </FormItem>
          <FormItem label="跳转地址" prop="link">
              <Input v-model="formValidate.link" placeholder="banner跳转地址"></Input>
          </FormItem>
          <FormItem>
              <Button @click="handleReset" style="margin-left: 8px">重置</Button>
          </FormItem>
      </Form>
    </Modal>
    </div>
  </div>
</template>

<script>
import conf from '@/api/apiConf'
export default {
  data: () => ({
    show:false,
    isAdd:false,
    searchForm:{
      id:'',
      title:'',
      // url:'',
      // link:''
    },
    producsTitle: [{
            title: 'ID',
            key: 'banner_id',
            width: 70,
            align: 'center',
          },
          {
            title: '标题',
            key: 'banner_title',
            align: 'center',
            ellipsis: true,
          },
          {
            title: '图地址',
            key: 'banner_url',
            align: 'center',
            ellipsis: true,
          },
          {
            title: '排序',
            key: 'banner_order',
            width: 70,
            align: 'center',
          },
          {
            title: '状态',
            key: 'banner_status',
            width: 70,
            align: 'center',
          },
          {
            title: '图跳转地址',
            key: 'banner_link',
            align: 'center',
            ellipsis: true,
          },
          {
            title: '操作',
            slot: 'action',
            width: 150,
            align: 'center',
          },
    ],
    products: [],
    formValidate: {
      title: '',
      url: '',
      order: 1,
      link: '',
    },
    ruleValidate: {
        title: [
            { required: true, message: '标题不能为空', trigger: 'blur' }
        ],
        url: [
            { required: true, message: '图片连接不能为空', trigger: 'blur' }
        ],
        link: [
            { required: true, message: 'banner跳转地址不能为空', trigger: 'blur' }
        ],
    }

  }),
  created() {
    if(this.$route.params&&this.$route.params.p_id){
      // this.searchForm.link='/details/'+this.$route.params.p_id
      this.formValidate.link='/details/'+this.$route.params.p_id
    }
    this.search()
  },
  methods: {
    addBanner(){
      this.isAdd=true
      this.show=true
    },
   async modalSubmit(){ 
      if(this.detectKey()) return
      let apiUrl='',params=this.formValidate
      if(this.isAdd){
        apiUrl=conf.addBanner
      }else{
        apiUrl=conf.updateBannerInfo
      }
      let res= await this.$http.post(apiUrl, params)
       if(res.data.status==200){
         this.$Message.info('操作成功')
         this.clearKey(this.searchForm)
         this.search()
       }else{
         this.$Message.info('操作失败')
       }
    },
    fixTable (row) {
      this.formValidate={
        id:row.banner_id,
        title:row.banner_title,
        url:row.banner_url,
        order:row.banner_order,
        status:row.banner_status,
        link:row.banner_link
      }
      this.isAdd=false
      this.show=true
    },
    handleReset (name) {
        this.$refs[name].resetFields();
    },
    async search(){
      let res= await this.$http.post(conf.searchBanner, this.searchForm)
       if(res.data.status==-200){
         this.$Message.info('获取数据失败')
       }
       if(res.data.status==200){
         this.products=res.data.data
       }
    },
    clearKey(obj){
      for (const key in obj) {
        if (Object.hasOwnProperty.call(obj, key)) {
          obj[key]='';
        }
      }
    },
    detectKey(){
      let tipKey='';
      for (const key in this.formValidate) {
        if (Object.hasOwnProperty.call(this.formValidate, key)) {
          if(!this.formValidate[key]) tipKey=key
        }
      }
      switch (tipKey) {
        case 'title':
          tipKey='标题不能为空'
          break;
        case 'url':
          tipKey='图片地址不能为空'
          break;
        case 'link':
          tipKey='banner跳转地址不能为空'
          break;
      }
      if(tipKey){
        this.$Message.info(tipKey)
        return true
      } 
      return false
    }
  },
}
</script>

<style lang="less" scoped>
.queryProducts {
  width: 100%;
  padding: 10px;
  .admin_img_top{
    width: 100%;
    .search_content{
      width: 100%;
      .search_item{
        width: 240px;
        display: inline-block;
        margin-right: 20px;
        margin-bottom: 20px;
        text-align: left;
        span{
          width: 80px;
          text-align: end;
        }
        /deep/.ivu-input-wrapper{
          width: 160px;
        }
      }
    }
    .admin_top_handle{
      display: block;
    }
  }
}

</style>
